<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
    <meta http-equiv=refresh content={{refreshrate}}>
    <link href="/css/rbs/rbs.css" rel="stylesheet">
    <link href="/css/south-street/jquery-ui-1.10.3.custom.css" rel="stylesheet">

    <link href="/css/datatables/jquery.dataTables_themeroller.css" rel="stylesheet">
    <script src="/js/jquery-1.9.1.js"></script>
    <script src="/js/jquery-ui-1.10.3.custom.js"></script>
    <script src="/js/jquery.corner.js"></script>
    <script src="/js/jquery.dataTables.js"></script>
    <script src="/js/jquery.cookie.js"></script>


<script type="text/javascript">
  $(document).ready(function(){
    
    //==============service
    
     $("#serviceheading").corner();
     $("#servicecontent").corner();
    
     if ($.cookie('servicecontent') != null) {
        //alert("cookie set: " + $.cookie('servicecontent-visible'))
        if ($.cookie('servicecontent') == 'down') {
            //alert("sliding down cookie: " + $.cookie('servicecontent-visible'))
            $("#servicecontent").slideDown(1);
        } else {
            //alert("sliding up cookie: " + $.cookie('servicecontent-visible'))
            $("#servicecontent").slideUp(1);
        }
     }
    
     $("#servicelabel").click(function(){
 
                if ($('#servicecontent').is(':visible')) {
                    $.cookie('servicecontent', 'up');
                    //alert("setting new cookie val onclick: false")
                    $("#servicecontent").slideUp();

                } else {
                    //$.cookie('servicecontent-visible', true);
                    $.cookie('servicecontent', 'down');
                    //alert("setting new cookie val onclick: true")
                    $("#servicecontent").slideDown();
                }
                
                //alert("setting new cookie val onclick: " + $.cookie('servicecontent-visible'))
                //$.cookie('servicecontent-visible', $('#servicecontent').is(':visible'));
      });
     
     //==============queue
     $("#queueheading").corner();
     $("#queuecontent").corner();
     
     if ($.cookie('queuecontent') != null) {
        //alert("cookie set: " + $.cookie('servicecontent-visible'))
        if ($.cookie('queuecontent') == 'down') {
            //alert("sliding down cookie: " + $.cookie('servicecontent-visible'))
            $("#queuecontent").slideDown(1);
        } else {
            //alert("sliding up cookie: " + $.cookie('servicecontent-visible'))
            $("#queuecontent").slideUp(1);
        }
     }
     
     $("#queuelabel").click(function(){
                //if ($('#servicecontent').is(':visible')) {
                if ($('#queuecontent').is(':visible')) {
                    $.cookie('queuecontent', 'up');
                    $("#queuecontent").slideUp();
                } else {
                    $.cookie('queuecontent', 'down');
                    $("#queuecontent").slideDown();
                }
      });

    //=========== build
      
     $("#buildheading").corner();
     $("#buildcontent").corner();
    
     if ($.cookie('buildcontent') != null) {
        //alert("cookie set: " + $.cookie('servicecontent-visible'))
        if ($.cookie('buildcontent') == 'down') {
            //alert("sliding down cookie: " + $.cookie('servicecontent-visible'))
            $("#buildcontent").slideDown(1);
        } else {
            //alert("sliding up cookie: " + $.cookie('servicecontent-visible'))
            $("#buildcontent").slideUp(1);
        }
     }
     $("#buildlabel").click(function(){
                //if ($('#servicecontent').is(':visible')) {
                if ($('#buildcontent').is(':visible')) {
                    $.cookie('buildcontent', 'up');
                    $("#buildcontent").slideUp();
                } else {
                    $.cookie('buildcontent', 'down');
                    $("#buildcontent").slideDown();
                }
      });
      
    //======datatables init
    
     $('#queuetable').dataTable({
		"bJQueryUI": true,
                "bStateSave": true,
                "bLengthChange": false,
                "iDisplayLength": 5,
		"sPaginationType": "full_numbers",
                "aoColumns": [
      { "sWidth": "35%" },
      { "sWidth": "18%" },
      { "sWidth": "18%" },
      { "sWidth": "18%" },
      { "sWidth": "70%" }
    ]
	});
  });
</script>
</head>
<body>

<!-- Test -->
<h1 class="demoHeaders">{{title}}</h1>

<p><h5>Last Refresh: {{lastrefresh}}</h5></p>
<p>&nbsp;</p>

<div id="serviceheading">
 <h3><label id="servicelabel">> Service Information</label></h3>

   <div id="servicecontent">
   {% for statname, value in statusInfo.iteritems() %}
    <b>{{statname}}:</b>  {{value}}<br>
   {% endfor %}
   </div>
</div>

<br>

<div id="queueheading">
    <h3><label id="queuelabel">> Queue</label></h3>
        <div id="queuecontent">
          <table id="queuetable">
            <thead>
            <tr>
                <th>
                    Submission Date
                </th>
                <th>
                    Package
                </th>
                <th>
                    OS Type
                </th>
                <th>
                    Architecture
                </th>
                <th>
                    Deploy To Repository
                </th>
            </tr>
            </thead>
            <tbody>
        {% if queuelist|length > 0 %}
          {% for buildreq in queuelist %}
            <tr>
                <td>
                    {{buildreq['build']['submittime']}}
                </td>
                <td>
                    {{buildreq['package']}}
                </td>
                <td>
                    {{buildreq['ostype']}}
                </td>
                <td>
                    {{buildreq['arch']}}
                </td>
                <td>
                    {{buildreq['repo']['deploy']}}
                </td>
            </tr>
    
          {% endfor %}
    {% else %}
            <tr>
                <td>
                    <i>Empty</i>
                </td>
                <td>
                    <i>Empty</i>
                </td>
                <td>
                    <i>Empty</i>
                </td>
                <td>
                    <i>Empty</i>
                </td>
                <td>
                    <i>Empty</i>
                </td>
            </tr>
    {% endif %}
            </tbody>
        </table>
      </div>
</div>

<br>

<div id="buildheading">
    <h3><label id="buildlabel">> Builds</label></h3>
    
    <div id="buildcontent">
        Nothing yet.
    </div>
</div>

</body>
</html>
